<template>
  <van-button v-if="isFollow" class="follow-btn" round size="small" :loading="followLoading"
    @click="onFollow">已关注
  </van-button>
  <van-button v-else class="follow-btn" type="info" color="#3296fa" round size="small" icon="plus"
    :loading="followLoading" @click="onFollow">
    关注</van-button>
</template>
<script>
import { followUser, CancelFollowUser } from '@/api/user';
export default {
  name: 'FollowPage',
  components: {},
  props: {
    isFollow: {
      type: Boolean,
      required: true,
    },
    userId: {
      required: true
    }
  },
  data() {
    return {
      followLoading: false, // 按钮加载状态
    };
  },
  created() {},
  computed: {},
  methods: {
    // 关注和取消关注
    async onFollow() {
      this.followLoading = true;
      if (this.isFollow) {
        // 取消关注
        try {
          await CancelFollowUser(this.userId);
        } catch (error) {}
      } else {
        // 关注用户
        try {
          await followUser(this.userId);
        } catch (err) {
          let message = '操作失败!请重试';
          if (err.response && err.response.status == 400) {
            this.$toast('不能关注自己哦!');
          }
          this.$toast(message);
        }
      }
      this.followLoading = false;
      // this.article.is_followed = !this.article.is_followed;
      this.$emit('updata_is_followed', !this.isFollow)
    },
  },
};
</script>
<style lang='less' scoped>
</style>
